import db from "utils/localstorage/main.js";
import { getLanguage } from "@/lang/index";
import projectSettings from "@/settings";

export default {
  namespaced: true,
  state: {
    settingBar: {
      opened: false,
    },
    sidebar: {
      opened: db.get("SIDEBAR_STATUS", true),
      withoutAnimation: false,
    },
    device: "desktop",
    language: getLanguage(),
    sidebarLogo: db.get("SIDEBAR_LOGO", true),
    multipage: db.get("MULTIPAGE", true),
    fixSiderbar: db.get("FIX_SIDERBAR", true),
    fixHeader: db.get("FIX_HEADER", true),
    colorList: [
      "rgb(245, 34, 45)",
      "rgb(250, 84, 28)",
      "rgb(250, 173, 20)",
      "rgb(66, 185, 131)",
      "rgb(82, 196, 26)",
      "rgb(24, 144, 255)",
      "rgb(47, 84, 235)",
      "rgb(114, 46, 209)",
    ],
    color: db.get("COLOR", "rgb(24, 144, 255)"),
    theme: "#1890FF",

    /** @type { import("@/types/Common").LayoutType } 默认预设值为顶部边栏布局 */
    layoutType: db.get("layoutType", "header-sidebar"),

    footer: {
      // TODO 底部导航栏文本 目前暂时留空 有空实现该配置功能
      text: "",
      /** 是否隐藏底部导航栏？ */
      hidden: projectSettings.layout.hiddenFooter,
    },
    header: {
      hidden: db.get("HEADWE_HIDDEN", projectSettings.layout.hiddenHeader)
    },
    menu: {
      hidden: db.get("MENU_HIDDEN", projectSettings.layout.hiddenMenu)
    },
  },
  mutations: {
    setFooterHidden(state, val) {
      state.footer.hidden = val;
    },

    setLayoutType(state, val) {
      db.save("layoutType", val);
      state.layoutType = val;
    },

    toggleSidebar: (state) => {
      state.sidebar.opened = !state.sidebar.opened;
      state.sidebar.withoutAnimation = false;
      if (state.sidebar.opened) {
        db.save("SIDEBAR_STATUS", 1);
      } else {
        db.save("SIDEBAR_STATUS", 0);
      }
    },
    closeSidebar: (state, withoutAnimation) => {
      db.save("SIDEBAR_STATUS", 0);
      state.sidebar.opened = false;
      state.sidebar.withoutAnimation = withoutAnimation;
    },
    openSettingBar(state, val) {
      state.settingBar.opened = val;
    },
    setMultipage(state, multipage) {
      db.save("MULTIPAGE", multipage);
      state.multipage = multipage;
    },
    fixSiderbar(state, val) {
      db.save("FIX_SIDERBAR", val);
      state.fixSiderbar = val;
    },
    fixHeader(state, val) {
      db.save("FIX_HEADER", val);
      state.fixHeader = val;
    },
    setSettingBar(state, val) {
      state.settingBar.opened = val;
    },
    setColor(state, color) {
      db.save("COLOR", color);
      state.color = color;
    },
    setLanguage: (state, language) => {
      db.save("LANGUAGE", language);
      state.language = language;
    },
    toggleDevice: (state, device) => {
      state.device = device;
    },
    setSidebarLogo(state, val) {
      db.save("SIDEBAR_LOGO", val);
      state.sidebarLogo = val;
    },
    setTheme(state, val) {
      state.theme = val;
    },
    setHeaderHidden(state, val) {
      db.save("HEADWE_HIDDEN", val);
      state.header.hidden = val;
    },
    setMenuHidden(state, val) {
      db.save("MENU_HIDDEN", val);
      state.menu.hidden = val;
    },
  },
};
